<template>
  <ul
    :class="'vue-contextmenuName-' + contextMenuData.menuName"
    class="vue-contextmenu-listWrapper"
    @contextmenu.stop
  >
    <li v-for="item in contextMenuData.menulists" :key="item.btnName" class="context-menu-list">
      <div v-if="item.children && item.children.length > 0" class="has-child">
        <div
          :class="{'no-allow': item.disabled ? item.disabled : false}"
          class="parent-name btn-wrapper-simple"
        >
          <i :class="item.icoName ? item.icoName : ''" class="nav-icon-fontawe"/>
          <span class="nav-name-right">{{ item.btnName }}</span>
          <i class="icon"/>
        </div>
        <Tree :itemchildren="item.children" :float="floatDirection" @childhandler="fnHandler" />
      </div>
      <div v-else>
        <div
          :class="{'no-allow': item.disabled ? item.disabled : false}"
          class="no-child-btn btn-wrapper-simple"
          @click.stop="item.disabled === true ? '' : fnHandler(item)"
        >
          <!-- <el-image style="width: 50px; height: 50px" :src="url" :fit="fit"></el-image> -->
          <!-- :class="item.icoName ? item.iconName : ''" -->
          <i :style="{backgroundImage:'url(\''+item.icoName+'\')'}" class="nav-icon-fontawe"/>
          <span class="nav-name-right">{{ item.btnName }}</span>
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
import Tree from './Tree.vue'
export default {
  name: 'ContextMenuComponent',
  components: {
    Tree
  },
  props: {
    contextMenuData: {
      type: Object,
      requred: false,
      default() {
        return {
          menuName: null,
          axis: {
            x: null,
            y: null
          },
          menulists: [
            {
              fnHandler: '',
              icoName: '',
              btnName: ''
            }
          ]
        }
      }
    },
    transferIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      floatDirection: 'float-statue-1',
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      // url2:'static/img/pathPlan/start.png'
    }
  },
  watch: {
    'contextMenuData.axis'(val) {
      var x = val.x
      var y = val.y
      var innerWidth = window.innerWidth
      var innerHeight = window.innerHeight
      var _this = this
      var index = _this.transferIndex
      var menuName = 'vue-contextmenuName-' + _this.contextMenuData.menuName
      var menu = document.getElementsByClassName(menuName)[index]
      menu.style.display = 'block'
      var menuHeight = this.contextMenuData.menulists.length * 30
      var menuWidth = 150
      menu.style.top =
        (y + menuHeight > innerHeight ? innerHeight - menuHeight : y) + 'px'
      menu.style.left =
        (x + menuWidth > innerWidth ? innerWidth - menuWidth : x) + 'px'
      document.addEventListener(
        'mouseup',
        function(e) {
          // 解决mac电脑在鼠标右键后会执行mouseup事件
          if (e.button === 0) {
            menu.style.display = 'none'
          }
        },
        false
      )
      if (x + 2 * menuWidth > innerWidth && y + 2 * menuHeight > innerHeight) {
        this.floatDirection = 'float-status-4'
      }
      if (x + 2 * menuWidth < innerWidth && y + 2 * menuHeight > innerHeight) {
        this.floatDirection = 'float-status-1'
      }
      if (x + 2 * menuWidth > innerWidth && y + 2 * menuHeight < innerHeight) {
        this.floatDirection = 'float-status-3'
      }
      if (x + 2 * menuWidth < innerWidth && y + 2 * menuHeight < innerHeight) {
        this.floatDirection = 'float-status-2'
      }
    }
  },
  methods: {
    fnHandler(item) {
      this.$emit(item.fnHandler)
    }
  }
}
</script>
<style>
.vue-contextmenu-listWrapper {
  display: none;
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  top: 0;
  left: 0;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 #cccccc;
  /* font-family: 'Courier New', Courier, monospace; */
  font-size: 12px;
}
.vue-contextmenu-listWrapper .context-menu-list {
  position: relative;
  background: #ffffff;
  text-decoration: none;
  list-style: none;
  margin: 3px 0;
  line-height: 34px;
  font-size: 14px;
  cursor: pointer;
  font-family: Arial, sans-serif;
}
.context-menu-list:hover {
  background: #f6f6f6;
}
.context-menu-list .has-child {
  position: relative;
  cursor: pointer;
  padding: 5px 10px;
}

.context-menu-list:hover > .has-child > .child-ul-wrapper {
  display: block;
}
.parent-name .icon {
  position: absolute;
  display: block;
  top: 4px;
  right: 0;
  border-top: 4px solid transparent;
  border-left: 8px solid #111111;
  border-bottom: 4px solid transparent;
  border-right: 4px solid transparent;
}
.no-child-btn {
  padding: 10px 10px;
  cursor: pointer;
}
.nav-icon-fontawe {
  position: absolute;
  left: 0;
  /* background: url(/static/img/pathPlan/start.png); */
  width: 26px;
  height: 28px;
  margin: -5px 10px;
}
.nav-name-right {
  margin-left:35px;
  margin-right:20px;
  height: 20px;
  line-height: 20px;
  display: block;
}

.no-allow {
  color: #d3cfcf;
  cursor: not-allowed;
}

.btn-wrapper-simple {
  position: relative;
  /* height: 16px; */
  line-height: 20px;
}

ul {
  padding-inline-start: 0px;
}
</style>
